<template>
  <div class="wrap">
    <!-- 面包屑导航 -->
    <a-breadcrumb>
      <a-breadcrumb-item>
        <!-- <router-link to="/home"> -->
        <a-icon type="home" />
        <span>主页</span>
        <!-- </router-link> -->
      </a-breadcrumb-item>
      <a-breadcrumb-item>
        <a-icon type="user" />
        <span>实习申请</span>
      </a-breadcrumb-item>
    </a-breadcrumb>

    <!-- 标签页 -->
    <a-empty v-if="StudentInfo.isGroup">
      <span slot="description">已加入实习小组</span>
    </a-empty>

    <a-tabs default-active-key="1" animated v-else>
      <a-tab-pane key="1" tab="实习申请">
        <!-- 步骤条 -->
        <a-spin :spinning="SpinningState" tip="正在提交申请. . .">
          <div class="spin-content">
            <a-steps v-model="current" type="navigation">
              <a-step title="实习方向" />
              <a-step title="实习小组" />
              <a-step title="完成" :disabled="current < 1" />
            </a-steps>
            <SXDirection v-if="current === 0"></SXDirection>
            <SXGroup v-else-if="current === 1"></SXGroup>
            <SXComplete v-else></SXComplete>
          </div>
        </a-spin>
      </a-tab-pane>
      <!-- <a-tab-pane key="2" tab="岗位列表"> Content of Tab Pane 2 </a-tab-pane> -->
    </a-tabs>
  </div>
</template>

<script>
import { mapState } from "vuex";
import SXDirection from "./SXDirection";
import SXComplete from "./SXComplete";
import SXGroup from "./SXGroup";
export default {
  data() {
    return {
      //步骤条索引
      current: 0,
    };
  },
  computed: {
    ...mapState("Apply", ["SpinningState"]),
    ...mapState("StudentLogin", ["StudentInfo"]),
  },
  components: {
    SXDirection,
    SXComplete,
    SXGroup,
  },
};
</script>

<style lang='less' scoped>
.wrap {
  padding: 1%;
}

.ant-breadcrumb {
  .ant-breadcrumb-link {
    letter-spacing: 5px;
  }
}

.ant-tabs {
  width: 100%;
  border: none;
  box-shadow: none;
  margin-top: 20px;

  .ant-tabs-top-bar {
    .ant-tabs-tab {
      margin: 0 15px 0 0;
    }
  }

  .ant-tabs-tabpane {
    .ant-steps {
      width: 60%;
      margin-bottom: 15px;
    }
  }
}
</style>